import api from "../../axios/api";
import React, { useEffect, useState } from "react";
import { useParams, useNavigate } from "react-router-dom";
import { useSelector, useDispatch } from "react-redux";
import { List, Checkbox } from "antd-mobile";
import { changeStatus } from "../../store/userSlice";
import { ActionBar } from "react-vant";
import { Popup, Button } from "antd-mobile";
import {  ProgressBar } from 'antd-mobile'
import { DotLoading } from 'antd-mobile'
import { CountDown } from 'react-vant';
import "./List.css";
const Index = () => {
  const [visible1, setVisible1] = useState(false);
  let navigate = useNavigate();
  const dispatch = useDispatch();
  const initialState = useSelector((state) => state.userSlice);
  console.log(initialState);
  const [list, setlist] = useState([]);
  const { id } = useParams();
  console.log(id);
  const getData = async () => {
    const res = await api.get("/api/trip/train/detail", { params: { id } });
    const { code, data } = res.data;
    if (code == 200) {
      console.log(res.data);
      setlist(data);
    }
  };
  useEffect(() => {
    getData();
  }, []);
  const goorder = async () => {
    const res = await api.get("/api/pay", {
      params: {
        id: "sdgasdagfs",
        title: "订单支付",
        price: "765",
      },
    });
    const { code, data } = res.data;
    if (code == 200) {
      window.location.href = data;
    }
  };
  const [time,setTime]=useState(0)
  const [pd,setpd]=useState('占座中')
  const [djs,setdjs]=useState()
  const [jz,setjz]=useState(<DotLoading />)
  let timer=setInterval(()=>{
    setTime(time+10)
    if(time==100){
      clearInterval(timer)
      setpd('等待支付')
      setdjs(<CountDown time={30 * 60 * 60 * 1000} />)
      setjz()
    }
  },1000)
  return (
    <div>
    <div style={{width:'100vw',height:'50px',background:'grey'}}>
      <p>{pd}</p>
      <p>{djs}</p>
    </div>
      <div className="box">
        <p>
          <span>21:03</span>
          <span>{list.startTime}</span>
          <span>21:03</span>
        </p>
        <p>
          <span>{list.start}</span>
          <span
            onClick={() => {
              setVisible1(true);
            }}
          >
            D2444，时刻表
          </span>
          <span>{list.end}</span>
        </p>
      </div>
      <ProgressBar percent={time}  style={{width:'320px',float:'left'}}/>

      <p></p>
      {jz}
      <div>
        <div>
          {initialState.map((item, index) => {
            if (item.status) {
              return (
                <List.Item
                  title={item.phone}
                  description={item.cardid}
                  prefix={pd}
                  extra={
                    
                    <Checkbox
                      checked={item.status}
                      onChange={(val) => {
                        dispatch(changeStatus({ index, checked: val }));
                      }}
                    />
                  }
                  key={index}
                >
                  {item.name}
                </List.Item>
              );
            } else {
              return null;
            }
          })}
        </div>
        <ActionBar>
          <ActionBar.Button
            type="danger"
            text="支付订单"
            onClick={() => {
              setVisible1(true);
            }}
            
          />
        </ActionBar>
      </div>
      <Popup
        visible={visible1}
        onMaskClick={() => {
          setVisible1(false);
        }}
        onClose={() => {
          setVisible1(false);
        }}
      >
        <Button block color="primary" size="large" onClick={() => goorder()}>
          支付宝
        </Button>
        <Button block color="success" size="large">
          微信
        </Button>
        <Button block color="danger" size="large">
          京东白条
        </Button>
      </Popup>
    </div>
  );
};

export default Index;
